<?php
require_once 'classes/mySession.php';
require_once 'classes/albums.php';

#CHECK SESSION TO USER ALREADY LOGGED IN
#IF NOT, REDIRECT TO LOGIN PAGE
if(!$pgSession->isUserLoggedIn()){
	$pgSession->redirect("./login.php");
}

$currentAlbumid = "";
if(isset($_GET["".Album::$currentAlbumForms])){
	$currentAlbumid = $_GET["".Album::$currentAlbumForms];
}
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<title>PG++ :: Ferramenta de Anotação de Localização em Fotografias</title>
	<meta charset="utf-8">
	<meta name="description" content="Ferramenta de anotação de localização em coleções de fotografias pessoais.">
	<meta name="author" content="Davi Serrano e George Henrique">
	<script src="lib/jquery.js"></script>
	<script src="lib/jquery-ui.js"></script>
	
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/styles.css">
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
	
</head>

<body>

	<header>
		<div class="topo">
			<a href="./"><img class="logo left" src="images/logo.png"/></a>
			<nav class="nav-topo">
				<a href="./home.php">Mapa</a>
				<a href="./album.php">Álbuns</a>
				<a href="./geoAlbum.php">Geo-Álbuns</a>
				<a href="./photo.php">Fotos</a>
				<a href="./logout.php">Logout</a>
			</nav>
			<div class="clear"></div>
		</div>
	</header>
	
	<div class="clear"></div>
	
	<section onload="">
		<div class="conteudo">
			<div class="topo-caixa" id="topoNoLocPhotos" style="height: 50px;">
				
			</div>
			
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.exp&libraries=places"></script>
			<script type="text/javascript" src="./js/oms-min.js" ></script>
			<input id="pac-input-big" class="controls" type="text" placeholder="Busca">
			<div class="caixa" id="gmap_photos" style="height:550px;" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
				<script type="text/javascript" src="./js/markerclusterer_compiled.js" ></script>
				<script src="./js/pg_MainGoogleMaps.js"></script>
				<style>#gmap_photos img{max-width:none!important;background:none!important}</style>
				
			</div>
			
			<div class="clear"></div>
		</div>
	</section>
	
	<div class="clear"></div>
	
	<footer>
		<nav class="rodape">
			<a href="#">SOBRE</a>
			<a href="#">CONTATO</a>
		</nav>
	</footer>
	
	<div class="fundo"></div>
	<div class="overlap">
		<div class="caixa-foto">
			<p class="bold font-14">Álbum: <a href="#" id="albumLink" class="regular laranja">Vilarejos da Argentina</a></p>
			<div class="foto">
				<img style="height: 100%; max-width: 100%; margin: auto; display: block;" src="images/default.jpg"/>
			</div>
			<p class="bold font-14">Descrição:<br>
				<textarea rows="3" cols="50" maxlength="255" readonly="readonly" class="descricao" id="descricaoText"></textarea>
				<a href="#" onclick="editData()" id="photoDataButton" class="editar">Editar</a></p>
		</div>
		<div class="caixa-localizacao">
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.exp&libraries=places"></script>
			<div style="overflow:hidden;height:348px;width:278px;">
				<input type="text" id="pac-input" class="controls" placeholder="Busca">
				<div id="gmap_canvas" style="height:348px;width:278px;"></div>
				<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
				<!-- <a class="google-map-code" href="http://www.map-embed.com" id="get-map-data">www.map-embed.com</a> -->
			</div>
			<input type="hidden" id="currentPhotoid" />
			<script type="text/javascript" src="./js/pg_googleMapsViewPhoto.js"></script>
			<a href="#" onclick="editLocationMainMap()" id="locationButton" class="alterar">Alterar localização</a>
		</div>
		
		<div class="clear"></div>
	</div>
	
<script>
	var currentAlbumId = '';
	var getAlbumIdParameter = '';
	<?php echo (empty($currentAlbumid)?"":"currentAlbumId ='".$currentAlbumId."'; ");?>
	<?php echo (empty($currentAlbumid)?"":"getAlbumIdParameter ='".Album::$currentAlbumForms."=';");?>
	$(function() {	
		$(".fundo").click(function() {
			$(".fundo").fadeOut();
			$(".overlap").fadeOut();
		});
	});

	function verFotoRef(pid){
		event.preventDefault();
		var link = './consulta.php?photoid='+pid;

		$.ajax({
			url: link,
			type: "GET",
			dataType: "json",
			async: false,
			success: function(data) {
				$(".fundo").fadeIn();
				$(".overlap").center();
				$(".overlap").fadeIn();
				change(data);
			},
			error: function(data) {
				console.log(data);
			}
		});
	}

	function editData(){
		if(document.getElementById("descricaoText").readOnly){
			document.getElementById("descricaoText").readOnly=false;
			document.getElementById("photoDataButton").innerHTML="Salvar";
		}else{
			var photoid = document.getElementById("currentPhotoid").value;
			var text = document.getElementById("descricaoText").value;
			var urlEncoded = "./add_description.php?description="+encodeURIComponent(text)+"&photoid="+photoid;
			alert(urlEncoded);
			$.ajax({
				url: urlEncoded,
				type: "GET",
				dataType: "json",
				async: false,
				success: function(data) {
					if(data.status){
						document.getElementById("descricaoText").readOnly=true;
						document.getElementById("photoDataButton").innerHTML="Editar";
					}else{
						alert("Não foi possível salvar. Tente novamente mais tarde");
					}
				},
				error: function(data) {
					console.log(data);
				}
			});
		}
	}
	
	function change(data) {
		$(".foto img").attr("src", "./photos/"+data.owner+"/"+data.file_name);
		$(".descricao").text((data.text?data.text:""));
		document.getElementById("albumLink").innerHTML = (data.label);
		document.getElementById("albumLink").href = "./photo.php?<?php echo Album::$currentAlbumForms;?>="+data.albumid+"&<?php echo Album::$currentAlbumLabelForms; ?>="+data.label;
		document.getElementById("currentPhotoid").value = data.id;
		document.getElementById("locationButton").innerHTML = ('Alterar Localização');
		if(photoMarker)
			photoMarker.setDraggable(false);
		if(infowindow)
			infowindow.close();
		if(!map){
			init_map(data.latitude, data.longitude);
		}else{
			
			if(data.latitude && data.latitude!=0 && data.longitude && data.longitude!=0){ 
				var position = new google.maps.LatLng(data.latitude, data.longitude);
				map.setCenter(position);
				map.setZoom(13);
				photoMarker.setMap(map);
				photoMarker.setPosition(position);
				
			}else{
				map.setZoom(0);
				map.setCenter(new google.maps.LatLng(0, 0));
				photoMarker.setMap(null);
			}
		}
	}
	
	jQuery.fn.center = function () {
		this.css("position","absolute");
		this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
													$(window).scrollTop()) + "px");
		this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
													$(window).scrollLeft()) + "px");
		return this;
	}

</script>
</body>
</html>
